import React, { PureComponent } from 'react';
import { toJS } from 'mobx';
import { WeaRadioGroup, WeaProgress, WeaTable, WeaLocaleProvider } from 'ecCom';
import { Tooltip, Row, Col, Progress, Spin } from 'antd';
import Collapse from '../../public/votingDialog/collapse';
import SuggestionContent from './SuggestionContent';
import Suggestions from './Suggestions';
import SuggestionStore from '../../stores/result/Suggestions';

const getLabel = WeaLocaleProvider.getLabel;

export default class ResContent extends PureComponent {
  constructor(props) {
    super(props);
    this.prefixCls = 'vote-result-content';
    this.state = {
      suggestionVisible: false,
    };
  }

  WeaRadioGroupChange = (params) => {
    let { getDialogAllDatas } = this.props.store;

    // getDialogAllDatas(undefined, params); //因为只走2个接口
  };

  getTableList = () => {
    const { status } = this.props;
    let { votingDialogList } = toJS(status);
    let arr = votingDialogList
      ? votingDialogList.map((record, index) => {
          let contain = this.getContainTable(record.otherView, record);
          let hasLabel = this.getHasLabel(contain, record);
          return hasLabel;
        })
      : [];

    return arr;
  };
  getHasLabel = (contain, record) => {
    const { setPersonListDialog } = this.props.store;
    let prefixCls = 'voting-dialog';
    return (
      <div style={{ marginBottom: '10px' }}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@slr64c`}
          style={{
            height: '38px',
            lineHeight: '38px',
            backgroundColor: '#f8fcff',
          }}
        >
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@c3lojk`} span="18" style={{ paddingLeft: '25px' }}>
            <span className={`${prefixCls}-table-title`} title={record.label}>
              {record.label}
            </span>
            <span className={`${prefixCls}-table-title-ext`}>
              {record.labelExt}
            </span>
            {/* {`${record.label}${record.labelExt}`} */}
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4sbv1q`} span="6" style={{ paddingRight: '25px', textAlign: 'right' }}>
            <a
              onClick={() => {
                // 查看列表弹出框
                setPersonListDialog(true, 'questionList', record.questionid);
              }}
            >
              {`${record.percent}`}
            </a>
          </Col>
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@91um58`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zxiea9`}>
            <div className="votingDialog-noTableHeader">{contain}</div>
          </Col>
        </Row>
      </div>
    );
  };
  getContainTable = (type, record) => {
    // 0-单选不含其他，1-单选含其他，2-组合，3-填空
    const { store, printDetailMap, status, isPrintPreview } = this.props;
    const { setPersonListDialog } = store;
    if (type == 0) {
      let columns = this.getContainTableColumns(record.columns, type, record);
      return (
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ni4e0p`}
          columns={columns}
          dataSource={record.dataSource}
          pagination={false}
        />
      );
    } else if (type == 1) {
      let columns = this.getContainTableColumns(record.columns, type, record);

      return [
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@jfnuvq@${record.questionid}`}
          columns={columns}
          dataSource={record.dataSource}
          pagination={false}
        />,
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dpx0ru@${record.questionid}`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@uw1sa1@${record.questionid}`} style={{ lineHeight: '38px', height: '38px' }}>
            <div className="addHover">
              <span
                className="icon-coms-List"
                style={{ color: '#4d7ad8', paddingLeft: '28px' }}
              />
              <a
                style={{ paddingLeft: '8px' }}
                onClick={() => {
                  // 查看列表弹出框
                  setPersonListDialog(true, 'other', record.questionid);
                }}
              >
                {getLabel(25740, '其他')}
              </a>
            </div>
          </Col>
        </Row>,
      ];
    } else if (type == 2) {
      let columns = this.getContainTableColumns(record.columns, type, record);
      return (
        <div className="addHeader">
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9jmiok`}
            columns={columns}
            dataSource={record.dataSource}
            pagination={false}
          />
        </div>
      );
    } else if (type == 3) {
      return (
        <div>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6lk5e2`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@esm04w`} style={{ lineHeight: '38px', height: '38px' }}>
              <div className="addHover">
                <span
                  className="icon-coms-List"
                  style={{ color: '#4d7ad8', paddingLeft: '28px' }}
                />
                <a
                  style={{ paddingLeft: '8px' }}
                  onClick={() => {
                    // 查看列表弹出框
                    this.setState({ suggestionVisible: true }, () => {
                      this.suggestionRef &&
                        this.suggestionRef.wrappedInstance.getDatas({
                          ...status.WeaRadioGroupParams,
                          questionid: record.questionid,
                          votingid: status.votingDialogId,
                        });
                    });
                  }}
                >
                  {getLabel(385156, '查看列表')}
                </a>
              </div>
            </Col>
          </Row>
          {/* {printDetailMap[record.questionid] && isPrintPreview ? ( // 展开填空题查看列表
            <Row className={"vote-result-print-detaillist"}>
              <SuggestionContent
                store={printDetailMap[record.questionid]}
                tableStore={printDetailMap[record.questionid].suggestTabble}
                voteid={status.votingDialogId}
              />
            </Row>
          ) : null} */}
        </div>
      );
    }
  };
  getContainTableColumns = (columns, type, record) => {
    const { setPersonListDialog } = this.props.store;
    let parentRecord = { ...record };
    let newColumns = { ...columns };
    newColumns = columns.map((element, index) => {
      if (element.dataReader == 'value') {
        return element;
      }
        element.render = (text, record, index) => {
          let percent =
            record.qnums == 0 ? 0 : (text / record.qnums).toFixed(4);
          percent = Math.round(percent * 10000) / 100;

          let TooltipTitle =
            record.qnums == 0 ? '0（0%）' : `${text}（${percent}%）`;

          let optionid = record.optionid;

          if (optionid.indexOf('_') > -1) {
            optionid = `${record.key}_${element.key.split('_')[1]}`;
          }

          if (type == 2) {
            return (
              <div>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@aee1fr@${record.questionid}_${index}`}>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@byvuol`}>
                    <Progress ecId={`${this && this.props && this.props.ecId || ''}_Progress@3i0m07`} percent={percent} showInfo={false} />
                  </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@08pvlq@${record.questionid}_${index}`}>
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ftwtxt`}>
                    <a
                      style={{ paddingLeft: '8px' }}
                      onClick={
                        // 显示投票详情
                        () => {
                          setPersonListDialog(
                            true,
                            'optionList',
                            parentRecord.questionid,
                            optionid,
                          );
                        }
                      }
                    >
                      <span style={{ fontSize: '12px' }}> {TooltipTitle}</span>
                    </a>
                  </Col>
                </Row>
              </div>
            );
          }

          return (
            <div>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8cerry@${record.questionid}_${index}`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@csxfkd@${record.questionid}`} span="18">
                  <Progress ecId={`${this && this.props && this.props.ecId || ''}_Progress@6pscw1@${record.questionid}_${index}`} percent={percent} showInfo={false} />
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@py0l8k@${record.questionid}_${index}`} span="6">
                  <a
                    style={{ paddingLeft: '8px' }}
                    onClick={
                      // 显示投票详情
                      () => {
                        setPersonListDialog(
                          true,
                          'optionList',
                          parentRecord.questionid,
                          optionid,
                        );
                      }
                    }
                  >
                    <span style={{ fontSize: '12px' }}> {TooltipTitle}</span>
                  </a>
                </Col>
              </Row>
            </div>
          );
        };
        return element;
    });
    return newColumns;
  };
  getColumns = (e) => {
    let { setCustomDialog } = this.props.store;

    let newColumns = '';
    newColumns = e.map((column) => {
      let newColumn = { ...column };
      if (newColumn.dataIndex == 'opeator') {
        newColumn.render = (text, record, index) => {
          // 前端元素转义
          let valueSpan =
            record[`${newColumn.dataIndex}span`] !== undefined
              ? record[`${newColumn.dataIndex}span`]
              : record[newColumn.dataIndex];
          return (
            <div
              className="wea-votinglist-canClick wea-url-name"
              style={{ cursor: 'pointer' }}
              dangerouslySetInnerHTML={{ __html: valueSpan }}
              onClick={() => {
                setCustomDialog(true, record.opeatorKeyspan, 'details');
              }}
            />
          );
        };
        return newColumn;
      }
        return newColumn;
    });
    return newColumns;
  };

  render() {
    const { votingDialogTitle, status, statistics } = this.props;
    let { setPersonListDialog } = this.props.store;
    let { totalSize, doSize, unDoSize, votingDialogId, votingDialogSpin, notShowExport } = toJS(status);
    let percent = (doSize * 100) / totalSize;
    percent = Math.floor(percent * 100) / 100;
    let TooltipTitle =
      totalSize == 0
        ? '0'
        : `${getLabel(33849, '已参与')}：${doSize}（${percent}%）`;
    return (
      <div className={this.prefixCls}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@02j4n5`} spinning={votingDialogSpin}>
          <Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@naa8bh`} title={getLabel(81884, '统计范围')} showGroup={true}>
            <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@vx712d`}
              config={statistics}
              beforeInit={(a, b, c) => c(b)}
              onChange={(params) => {
                this.WeaRadioGroupChange(params);
              }}
            />
          </Collapse>
          <Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@vzpmmb`}
            title={getLabel(83274, '参与情况')}
            showGroup={true}
            childrenStyle={{ textAlign: 'center' }}
          >
            <div style={{ display: 'inline-block', width: '260px' }}>
              <div>
                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@gp1yo5`} placement="right" title={TooltipTitle}>
                  <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@862lsh`}
                    type="circle"
                    percent={(doSize * 100) / totalSize}
                    strokeColor="#2db7f5"
                    format={percent => (
                        <div>
                          <div style={{ fontSize: '28px' }}>
                            {totalSize}
                          </div>
                          <div style={{ fontSize: '12px' }}>
                            {getLabel(385157, '应参与')}
                          </div>
                        </div>
                      )}
                  />
                </Tooltip>
              </div>
              <div>
                <div style={{ display: 'inline-block', float: 'left' }}>
                  <div>
                    <a
                      onClick={() => { setPersonListDialog(true, 'participate'); }}
                      style={{ fontSize: '24px' }}
                    >
                      {doSize}
                    </a>
                  </div>
                  <div>
                    <span
                      style={{
                        display: 'inline-block',
                        width: '6px',
                        height: '6px',
                        borderRadius: '3px',
                        marginRight: '8px',
                        backgroundColor: '#2db7f5',
                      }}
                    />
                    <span>{getLabel(33849, '已参与')}</span>
                  </div>
                </div>
                <div style={{ display: 'inline-block', float: 'right' }}>
                  <div>
                    <a
                      onClick={() => {
                        setPersonListDialog(true, 'notInvolved');
                      }}
                      style={{ fontSize: '24px', color: '#999999' }}
                    >
                      {unDoSize}
                    </a>
                  </div>
                  <div>
                    <span
                      style={{
                        display: 'inline-block',
                        width: '6px',
                        height: '6px',
                        borderRadius: '3px',
                        marginRight: '8px',
                        backgroundColor: '#999999',
                      }}
                    />
                    <span>{getLabel(33850, '未参与')}</span>
                  </div>
                </div>
              </div>
            </div>
          </Collapse>
          <Collapse ecId={`${this && this.props && this.props.ecId || ''}_Collapse@iw7o1m`} title={getLabel(25177, '统计报表')} showGroup={true}>
            {this.getTableList()}
          </Collapse>
        <Suggestions ecId={`${this && this.props && this.props.ecId || ''}_Suggestions@5k7iz1`}
          ref={ref => this.suggestionRef = ref}
          visible={this.state.suggestionVisible}
          onCancel={() => this.setState({ suggestionVisible: false })}
          voteName={votingDialogTitle}
          voteid={votingDialogId}
          exportExcel={this.exportExcel}
          notShowExport={notShowExport}
        />
      </Spin>
      </div>
    );
  }

  getDetailList = () => {
    const { store: { status, printDetailMap, setStoreState } } = this.props;
    const { votingDialogList } = toJS(status);
    let temp_printDetailMap = toJS(printDetailMap);
    // 请求所有填空题的列表
    votingDialogList && votingDialogList.map((record) => {
      if (record.otherView == 3 && !temp_printDetailMap[record.questionid]) {
        temp_printDetailMap[record.questionid] = new SuggestionStore();
        temp_printDetailMap[record.questionid].getTableList({
          ...status.WeaRadioGroupParams,
          questionid: record.questionid,
          votingid: status.votingDialogId,
        });
        setStoreState({ printDetailMap: temp_printDetailMap });
      }
    });
  }
}

/*
  外部接受参数说明
  - isPrintPreview: 是否是打印预览boolean
*/
